.text{
    font-size: 20px;
    text-decoration:none;
    line-height: 30px;
    text-indent: 10px;
}

#ul #li{
    padding: 10px;
}
.mydiv:first-child{
    margin: 10px;
}
.dark{
    background: olive;
    color: white;
    .text();
    #ul #li();
    // .mydiv:first-child();
}

// --------------------------------------------

.flex(){
    display: flex;
    flex-flow:row wrap;
    text-align: center;
    justify-content: center;

}
.table(){
    border-collapse:collapse;
    td{
        border: 1px solid black;
        >a{
            color: blanchedalmond;
        }
    }
}

.test1{
    .flex();
}

.test2{
    .table();
}

.flex(@row,@wrap,@align,@justify){
    display: flex;
    flex-flow: @row @wrap;
    text-align: @align;
    justify-content: @justify;
}

.test3{
    .flex(row,wrap,left,center);
}

.flex(@row:row,@wrap:nowrap,@align:center,@justify:center){
    display: flex;
    flex-flow: @row @wrap;
    text-align: @align;
    justify-content: @justify;
}

.test4{
    .flex(column,wrap);
}


.hello(@font-size) when(@font-size<20){
    font-size: @font-size;
    color: red;
}
.hello(@font-size) when(@font-size>20){
    font-size:@font-size;
    color: blue;
}

.a{
    .hello(30px);
}
.b{
    .hello(10px);
}


